import { ReactNode, Suspense, lazy } from "react";
import Home from "@/views/Home";
// import About from "@/views/About";
import { Navigate ,RouteObject} from "react-router-dom";
import  Login  from "@/views/Login";
//懒加载要添加loading组件
// const About = lazy(() => import("@/views/About"));
// const User = lazy(() => import("@/views/User"));
const Page1 = lazy(() => import("@/views/Page1"));
const Page2 = lazy(() => import("@/views/Page2"));
const Page301 = lazy(() => import("@/views/Page301"));
const LazyComponent = (comp: ReactNode):ReactNode => (
  <Suspense fallback={<div style={{background:"transparent",display:"none"}}>Loading...</div>}>{comp}</Suspense>
);
const routes:RouteObject[] = [
  {
    path: "/",
    element: <Navigate to={"/login"} />,
  },
  {
    path: "/",
    element: <Home />,
    children: [
      {
        path: "/page1",
        element: LazyComponent(<Page1 />),
      },
      {
        path: "/page2",
        element: LazyComponent(<Page2 />),
      },
      {
        path: "/page3/page301",
        element: LazyComponent(<Page301 />),
      },
    ],
  },
  {
    path:"*",
    element: <Navigate to={"/page1"} />,
  },
  {
    path: "/login",
    element: <Login />,
  },
];
export default routes;
